import React from 'react';
import type { FormProps } from 'antd';
import { Button, Checkbox, Form, Input, Card, Flex } from 'antd';
import Span from '@/components/span';

type FieldType = {
  username?: string;
  password?: string;
  remember?: string;
};

const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
  console.log('Success:', values);
};

const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
  console.log('Failed:', errorInfo);
};

const Login: React.FC = () => {
  return (
    <section className='mr-6 grow flex justify-evenly items-center h-screen'>
      <Card className='w-80'>
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item<FieldType>
            name="username"
            rules={[{ required: true, message: 'Please input your username!' }]}
            wrapperCol={{}}
          >
            <Input />
          </Form.Item>

          <Form.Item<FieldType>
            name="password"
            rules={[{ required: true, message: 'Please input your password!' }]}
            wrapperCol={{}}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item<FieldType>
            name="remember"
            valuePropName="checked"
            wrapperCol={{}}
          ><Flex gap="middle" justify="space-between">
              <Checkbox>记住我</Checkbox>
              <Span>忘记密码</Span>
            </Flex>
          </Form.Item>

          <Form.Item wrapperCol={{}} className='mb-3'>
            <Button type="primary" htmlType="submit" className='w-full'>
              登录
            </Button>
          </Form.Item>
          <Form.Item wrapperCol={{}} className='mb-3'>
          <Button className='w-full'>注册</Button>
          </Form.Item>
        </Form>
      </Card>
    </section>
  )
};

export default Login;